<template>
	<section class="container likeCategory">
		<div v-if="classifyList && classifyList.length >0">
			<van-checkbox-group v-model="result">
				<ul class="likeCategory_list">
					<li v-for="(classify, index) in classifyList" :key="index" >
						<van-checkbox :name="classify">
							<p class="txt"><span>{{classify.name}}</span></p>
							<img src="../../assets/images/categoryimg.jpg"/>
						</van-checkbox>
					</li>
				</ul>
			</van-checkbox-group>
			<div class="footbtn">
				<van-button round type="cyan" @click="onSubmit">确认选择</van-button>
			</div>
		</div>
		<no-data v-else></no-data>
	</section>
</template>
<script >
	import { Icon, Toast,Button, Checkbox, CheckboxGroup } from 'vant'
	import {getCategoryList} from "../../api/book";
	import {getClassifyList,saveClassifyList} from "../../api/user";
    import noData from '../home/noData'
    export default {
	components: {
		[Icon.name]: Icon,
		[Toast.name]: Toast,
		[Button.name]: Button,
		[Checkbox.name]: Checkbox,
		[CheckboxGroup.name]: CheckboxGroup,
        noData
	},
	data() {
		return {
            classifyList: [],
     		result: [],
			favouriteClassifyList:[],
		}
	},
	methods: {
        async onSubmit(){
			let addList = this.baseUtil.modelCopy(this.result);//需要新增的
			let delList = this.baseUtil.modelCopy(this.favouriteClassifyList);//需要新增的
            addList.map((e,i)=>{
				this.favouriteClassifyList.map((a,b)=>{
				    if(e.id == a.classifyId){
                        addList.splice(i,1);
                        delList.splice(b,1);
					}
				})
			});
			let resp = await saveClassifyList({classifyList:addList,favouriteClassifyList:delList});
            if(this.qUtil.validResp(resp)){
                Toast.success({message:"保存成功!",duration:1200});
				this.$router.push({name:'UserSet'});
			}else{
                Toast({message:"保存失败!",duration:1200});
			}

		},
		async init(){
		    let resp = await getCategoryList();
		    if(this.qUtil.validResp(resp)){
		        let list = resp.data.templateClassifyList;
		        if(list.length >0){
					this.classifyList = list;
				}
			}
			let resultResp = await getClassifyList();
		    if(this.qUtil.validResp(resultResp)){
		        let list = resultResp.data.classifyList;
		        this.favouriteClassifyList = list;
		        if(list.length > 0){
					this.classifyList.map((a,b)=>{
					    list.map((e,i)=>{
					        if(e.classifyId == a.id){this.result.push(a)};
						})
					})
				}
			}
		}
	},
	mounted(){
		this.init();
	}

}</script>
<style>
.likeCategory {
	background: #fff; 
	min-height: 100%;
}
.likeCategory_list {
	padding: 1rem 0.5rem;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 4rem;
	background: #fff; 
}
.likeCategory_list li{
	width: 30.3%;
	height: 100%;
	margin: 0 1.5% 0.8rem 1.5%;
}
.likeCategory_list li .van-checkbox{
	position: relative;
	text-align: center;
	
	overflow: initial;
}
.likeCategory_list li .van-checkbox__icon{
	position: absolute;
	right: -0.7rem;
	top: -0.7rem;
	z-index: 10;
	display: none;
}
.likeCategory_list li .van-checkbox__icon--checked{display: block;}
.likeCategory_list li .van-checkbox__icon--round .van-icon{
	width: 1.5rem !important;
	height: 1.5rem !important;
	border-width:0.2rem !important;
}
.likeCategory_list li span.van-checkbox__label{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0.4rem;
	background: #000;
	margin: 0;
}
.likeCategory_list li .van-checkbox__icon--checked + span {
	background: #2BB89A;
}
.likeCategory_list li  .txt {
	width: 100%;
	height: 100%;
	color: #fff;
	position: absolute;
	z-index: 10;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.likeCategory_list li .txt span {
	letter-spacing: 0.1rem;
	line-height: 1rem;
	font-size: 1rem;
}

.likeCategory_list li img {
	width: 100%;
	display: block;
	opacity: 0.6;
}
.likeCategory .footbtn{
	position: fixed;
	bottom: 1rem;
	width: 100%;
	height: auto;
	overflow: hidden;
	z-index: 100;
}
.likeCategory .footbtn .van-button{
	width: 85%;
}

</style>